<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=1024px, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <title>Spina</title>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../css/reset.css" />
    <link rel="stylesheet" href="../../css/icons.css" />
    <link rel="stylesheet" href="../../css/formalize.css" />
    <link rel="stylesheet" href="../../css/checkboxes.css" />
    <link rel="stylesheet" href="../../css/sourcerer.css" />
    <link rel="stylesheet" href="../../css/jqueryui.css" />
    <link rel="stylesheet" href="../../css/tipsy.css" />
    <link rel="stylesheet" href="../../css/calendar.css" />
    <link rel="stylesheet" href="../../css/tags.css" />
    <link rel="stylesheet" href="../../css/fonts.css" />
    <link rel="stylesheet" href="../../css/main.css" />
    <link rel="stylesheet" media="all and (orientation:portrait)" href="../../css/portrait.css" />
    <link rel="apple-touch-icon" href="./apple-touch-icon-precomposed.png" />
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
    
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <![endif]-->
  <meta charset="UTF-8"></head>
  
  <body>

    <!-- Primary navigation -->
    <nav id="primary">
      <ul>
        <li >
          <a href="../../dashboard/index.html">
            <span class="glyph dashboard"></span>
            Dashboard
          </a>
        </li>
        <li class="active">
          <a href="./index.html">
            <span class="glyph shuffle"></span>
            UI Elements
          </a>
        </li>
        <li >
          <a href="../../forms/forms/index.html">
            <span class="glyph pencil"></span>
            Forms
          </a>
        </li>
        <li >
          <a href="../../tables/tables/index.html">
            <span class="glyph listicon"></span>
            Tables
          </a>
        </li>
        <li >
          <a href="../../charts/linechart/index.html">
            <span class="glyph chart"></span>
            Charts
          </a>
        </li>
        <li class="bottom">
          <a href="../../login/index.html">
            <span class="glyph quit"></span>
            Log out
          </a>
        </li>
      </ul>
    </nav>
    
    <!-- Secondary navigation -->
    <nav id="secondary">
      <ul>
  <li class="active"><a href="./index.html">Miscellaneous</a></li>
  <li ><a href="../modal/index.html">Modal windows</a></li>
  <li ><a href="../buttons/index.html">Buttons &amp; Icons</a></li>
  <li ><a href="../calendar/index.html">Calendar</a></li>
  <li ><a href="../typography/index.html">Typography</a></li>
  <li ><a href="../notifications/index.html">Notifications</a></li>
</ul>
      
      <div id="notifications">
        <ul>
        </ul>
      </div>
    </nav>
    
    <section id="maincontainer">
      <div id="main">
      
      <div class="quick-actions">
  <a href="#"><span class="glyph cart"></span>Purchase template</a>
</div>

<div class="column-left">
  <div class="box">
    <div class="box-header">
      <h1>Sliders</h1>
    </div>
    
    <div class="box-content">
      <div class="slider"></div>
      <div class="slider {range: true, min: 100, max: 400, values: [200, 300]}"></div>
      <div class="slider {range: true, min: 100, max: 400, values: [120, 150]}"></div>
      <div class="slider {range: 'min', min: 0, max: 400, value: 50}"></div>
      <div class="slider {range: true, min: 100, max: 400, values: [120, 150]}"></div>
    </div>
  </div>
  
  <div class="box">
    <div class="box-header">
      <span class="glyph chart"></span><h1>Statistics</h1>
    </div>

    <ul class="statistics">
      <li>
        <a href="#">
          <span>1.3k</span>
          New visitors
        </a>
      </li>
      <li>
        <a href="#">
          <span>23</span>
          Returning visitors
        </a>
      </li>
      <li>
        <a href="#">
          <span>16%</span>
          Bounce rate
        </a>
      </li>
      <li>
        <a href="#">
          <span>7%</span>
          Increase since last month
        </a>
      </li>
    </ul>

    <div class="action_bar">
      <a href="#" class="button small"><span class="glyph export"></span>Export data</a>
      <a href="#" class="button small"><span class="glyph print"></span>Print statistics</a>
    </div>
  </div>

  <div class="box">
    <div class="box-header">
      <span class="glyph eye"></span><h1>Code view</h1>
    </div>

    <code class="html"><div class="box">
<div class="box-header">
  <span class="glyph eye"></span><h1>Code view</h1>
</div>

<code class="html">
...
</code>
</div></code>

  <div class="action_bar">
    <a href="#" class="button small"><span class="glyph windows"></span>Open in new window</a>
    <a href="#" class="button small"><span class="glyph file"></span>Copy code</a>
  </div>
</div>
</div>

<div class="column-right">
  <div class="box">
    <div class="box-header">
      <span class="glyph cog"></span><h1>Vertical sliders</h1>
    </div>
  
    <div class="box-content">
      <div class="slider-vertical {range: 'min', orientation: 'vertical', value: 10}"></div>
      <div class="slider-vertical {range: 'min', orientation: 'vertical', value: 40}"></div>
      <div class="slider-vertical {range: 'min', orientation: 'vertical', value: 22}"></div>
      <div class="slider-vertical {range: 'min', orientation: 'vertical', value: 84}"></div>
      <div class="slider-vertical {range: 'min', orientation: 'vertical', value: 50}"></div>
      <div class="clear"></div>
      
      <div class="action_bar">
        <a href="#" class="button small">Be in control</a>
      </div>
    </div>
  </div>
  
  <div class="box">
    <div class="box-header">
      <h1>Progress bar</h1>
    </div>
    
    <div class="box-content">
      <div class="progressbar {value: 40}"></div>
    </div>
  </div>
  
  <div class="box">    
    <div class="box-header">
      <h1>Current Hosting Plan</h1>
    </div>

    <table>
      <tbody>
        <tr>
          <td>Webhosting:</td>
          <td><strong>VPS Server 1</strong></td>
        </tr>
        <tr>
          <td>Available space:</td>
          <td>239/1000 GB used</td>
        </tr>
        <tr>
          <td>MySQL databases:</td>
          <td class="red">5/5 used</td>
        </tr>
        <tr>
          <td>Email accounts:</td>
          <td class="red">25/25 used</td>
        </tr>
        <tr>
          <td>Ruby version:</td>
          <td>1.9.3</td>
        </tr>
        <tr>
          <td>Rails version:</td>
          <td>3.0.1</td>
        </tr>
      </tbody>
    </table>

    <div class="action_bar">
      <a href="#" class="button blue"><span class="glyph plus2"></span>Upgrade plan</a>
      <a href="#">Cancel subscription</a>
    </div>
  </div>
</div>

<div class="clear"></div>
      
      </div>
    </section>
  
    <!-- JavaScript -->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jqueryui.min.js"></script>
    <script src="../../js/jquery.cookies.js"></script>
    <script src="../../js/jquery.pjax.js"></script>
    <script src="../../js/formalize.min.js"></script>
    <script src="../../js/jquery.metadata.js"></script>
    <script src="../../js/jquery.validate.js"></script>
    <script src="../../js/jquery.checkboxes.js"></script>
    <script src="../../js/jquery.selectskin.js"></script>
    <script src="../../js/jquery.fileinput.js"></script>
    <script src="../../js/jquery.datatables.js"></script>
    <script src="../../js/jquery.sourcerer.js"></script>
    <script src="../../js/jquery.tipsy.js"></script>
    <script src="../../js/jquery.calendar.js"></script>
    <script src="../../js/jquery.inputtags.min.js"></script>
    <script src="../../js/jquery.wymeditor.js"></script>
    <script src="../../js/jquery.livequery.js"></script>
    <script src="../../js/jquery.highcharts.js"></script>
    
    <!-- Just examples, can be removed in production -->
      <script src="../../js/chart_examples.js"></script>
      
    <script src="../../js/application.js"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11172759-15']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>